<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>BamZB流媒体直播</title>
    <link rel="stylesheet" href="/mdui/css/mdui.min.css"/>
</head>

<body class="mdui-drawer-body-left mdui-appbar-with-toolbar   mdui-theme-primary-blue-grey mdui-theme-accent-blue-grey mdui-bottom-nav-fixed">
<!-- mdui-appbar-scroll-hide -->
<div class="mdui-appbar mdui-appbar-fixed ">
    <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                  mdui-drawer="{target: '#main-drawer', swipe: true}"><i
                    class="mdui-icon material-icons">menu</i></span>
        <a href="/" class="mdui-typo-headline">BamZB</a>
        <div class="mdui-toolbar-spacer"></div>
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}"
              mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '链接库'}"><i
                class="mdui-icon material-icons">&#xe250;</i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '更多'}"><i
                class="mdui-icon material-icons">&#xe5d4;</i></a>
    </div>
</div>
<div class="mdui-drawer" id="main-drawer">
    <div class="mdui-row">
        <div class="mdui-col-sm-6 mdui-col-md-12">
            <div class="mdui-card">
                <div class="mdui-card-header">
                    <img class="mdui-card-header-avatar" src="/img/avatar1.jpg"/>
                    <div class="mdui-card-header-title">Bam</div>
                    <div class="mdui-card-header-subtitle">格物致知，知行合一</div>
                </div>
                <div class="mdui-card-media">
                    <img src="/img/card.jpg"/>
                    <div class="mdui-card-media-covered">
                        <div class="mdui-card-primary">
                            <div class="mdui-card-primary-title">Good</div>
                            <div class="mdui-card-primary-subtitle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue-grey">A</i>
                <div class="mdui-list-item-content">目录1</div>
                <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-collapse-item-body mdui-list">
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
            </div>
        </div>

        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue-grey">B</i>
                <div class="mdui-list-item-content">目录2</div>
                <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-collapse-item-body mdui-list">
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
            </div>
        </div>
    </div>
</div>
<div class="mdui-dialog" id="dialog-docs-theme">
    <div class="mdui-dialog-title">设置文档主题</div>
    <div class="mdui-dialog-content">
        <p class="mdui-typo-title">主题色</p>
        <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
            <div class="mdui-col">
                <label class="mdui-radio mdui-m-b-1">
                    <input type="radio" name="doc-theme-layout" value="" checked/>
                    <i class="mdui-radio-icon"></i>
                    Light
                </label>
            </div>
            <div class="mdui-col">
                <label class="mdui-radio mdui-m-b-1">
                    <input type="radio" name="doc-theme-layout" value="dark"/>
                    <i class="mdui-radio-icon"></i>
                    Dark
                </label>
            </div>
        </div>

    </div>
    <div class="mdui-divider"></div>
    <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple mdui-float-left" mdui-dialog-cancel>恢复默认主题</button>
        <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>ok</button>
    </div>
</div>

<div class="mdui-container">
    <p>本项目使用要点【注：Windows系统】，继续完善ing</p>
    <ul>
        <li>nginx配置：conf/nginx-win-rtmp.conf【注：配置中的权限等地址为启动Web项目后获得，也就是你在推流的时候再去验证】</li>
        <li>NginxRtmpService直接运行启动Nginx服务【注：CommandOption.NGINX_RTMP地址请改为你自己的地址】</li>
        <li>Ffmpeg本人环境变量path配置【注：E:\SoftProgramme\ffmpeg\bin】</li>
        <li>FfmpegdoApplication启动Web项目</li>
        <li>http://localhost:9090/【注：首页会显示直播列表】</li>
        <li>http://localhost:9090/rpush?roomid=zhuhaobamr 【注：请英文或者字母，皮一下的请随便，zhuhaobamr这就是我的房间直播号了】</li>
        <li>http://localhost:9090/hpush?roomid=zhuhaobamh 【注：请英文或者字母，皮一下的请随便，zhuhaobamh这就是我的房间直播号了】</li>
        <li>【注：以上两个看推流地址源码吧，我还在理解中】</li>
        <li>http://localhost:9090/【注：有人直播了，你进入首页点击直播列表吧，多刷新一下就有效果了，我本地测了大于100遍】</li>
        <li>CmdController【注：Ffmpeg推流用视频请自己录MP4】</li>
    </ul>
    <h1 th:text="${menu}"></h1>
    <a th:href="@{/media/menu}"
       th:text="|直播菜单页|" target="_blank"></a>
    <div class="mdui-table-fluid">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>直播间</th>
                <th>直播类型</th>
                <th>下播</th>
            </tr>
            </thead>
            <tbody th:each="live : ${lives}">
            <tr>
                <td>
                    <div class="mdui-chip">
                        <img class="mdui-chip-icon" src="/img/avatar1.jpg"/>
                        <span class="mdui-chip-title"><a
                                th:href="@{/media/rtmp(roomid=${live.key},roomtype=${live.value})}"
                                th:text="${live.key}"  target="_blank"></a></span>
                    </div>
                </td>
                <td>
                    <div class="mdui-chip">
                        <span class="mdui-chip-icon  mdui-color-blue-grey">ZB</span>
                        <span class="mdui-chip-title" th:text="${live.value}"></span>
                    </div>
                </td>
                <td>
                    <button th:onclick="closeRoom([[${live.key}]],[[${live.value}]]);">停止直播</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- mdui-bottom-nav-scroll-hide -->
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto  mdui-color-blue-grey">
    <a href="javascript:;" class="mdui-typo-headline">&COPY;BamZB</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="https://www.mdui.org/docs/media" class="mdui-typo-headline">DMDUI</a>
</div>
<script src="https://cdn.bootcss.com/fetch/2.0.4/fetch.js"></script>
<script src="/mdui/js/mdui.min.js"></script>
<script th:inline="javascript">
    var $$ = mdui.JQ;
    // var html =
    //     '<select class="mdui-select" mdui-select>' +
    //     '  <option value="1">State 1</option>' +
    //     '  <option value="2">State 2</option>' +
    //     '  <option value="3">State 3</option>' +
    //     '</select>';

    // // 动态添加了一个 Select 组件，但通过自定义属性调用时，该组件无法自动初始化
    // $$('body').append(html);
    // //mdui.updateTables() 方法来重新初始化表格
    // // 调用该方法，将初始化页面中所有未初始化的组件。
    // mdui.mutation();
    // mdui.snackbar({message: '关闭异常'});
    function closeRoom(id, type) {
        var options = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json' //'Content-Type': 'application/json'这样配置，所以触发了跨域中的预检请求
                //https://segmentfault.com/q/1010000012013431/a-1020000012016083
                //https://segmentfault.com/a/1190000009971254
            },
            body: JSON.stringify({
                "roomid": id,
                "roomtype": type
            })
        };
        fetch("http://localhost:9090/fetchclose", options).then(function (response) {
            console.log('headers的类型：' + response.headers.get('Content-Type'));
            console.log('请求时间：' + response.headers.get('Date'));
            console.log('请求状态：' + response.status);
            console.log('请求状态返回字符串：' + response.statusText);
            // 使用return 将数据返回对象。
            return response.json();
        }).then(function (data) {
            console.log('返回json数据', data);
            window.location.reload()
        }).catch(function (ex) {
            console.log('parsing failed', ex)
        })

    }
</script>
</body>

</html>